<template>
  <div>
    <Form :model="searchObj" inline="false">
      <FormItem>
        <Input v-model="searchObj.content" placeholder="标签名称" />
      </FormItem>

      <FormItem>
        <Select v-model="searchObj.status" placeholder="是否禁用">
          <Option value="0">禁用</Option>
          <Option value="1">未禁用</Option>
        </Select>
      </FormItem>

      <FormItem>
        <i-button type="primary" shape="circle" icon="ios-search" @click="serach">搜索</i-button>
      </FormItem>

      <FormItem>
        <i-button type="primary" shape="circle" icon="ios-search" @click="resetSearch">重置</i-button>
      </FormItem>
      <FormItem>
        <i-button type="primary" shape="circle" @click="exportTag" v-has="tag/exportTag">excel导出</i-button>
      </FormItem>
    </Form>

    <i-table :columns="columns1" :data="data1"></i-table>
    <Page
      :total="pageData.total"
      :current="pageData.current"
      :page-size="pageData.size"
      show-elevator
      show-total
      @on-change="changePage"
    ></Page>

    <!--新增/编辑标签信息-->
    <Modal v-model="tagDig" title="新增管理员账号" @on-ok="ok" @on-cancel="cancel" width="800px">
      <Form :model="tagObj" :label-width="80" ref="formCustom" :rules="ruleForm">
        <FormItem label="缩略图">
          <div class="demo-upload-list" v-show="showUpload">
            <template>
              <img :src="tagObj.avatar" />
              <div class="demo-upload-list-cover">
                <Icon type="ios-eye-outline" @click.native="handleView()"></Icon>
                <Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>
              </div>
            </template>
          </div>
          <div class="demo-upload-list" v-show="!showUpload">
            <Upload
              ref="upload"
              :headers="header"
              :show-upload-list="false"
              :on-success="handleSuccess"
              :format="['jpg','jpeg','png']"
              :max-size="2048"
              :on-format-error="handleFormatError"
              :on-exceeded-size="handleMaxSize"
              :before-upload="handleBeforeUpload"
              type="drag"
              :action="uploadPictureUrl"
              style="display: inline-block;width:58px;"
            >
              <div style="width: 58px;height:58px;line-height: 58px;">
                <Icon type="ios-camera" size="20"></Icon>
              </div>
            </Upload>
          </div>
        </FormItem>
        <FormItem label="账号" prop="content">
          <Input v-model="tagObj.content" placeholder="标签名称,不能和已存在账号重名..." />
        </FormItem>

        <FormItem>
          <i-button type="primary" @click="submitForm()">保 存</i-button>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import { tagPage, exportExcel, getDetail } from "@/api/blogTagApi";
import { dealPageData } from "@/utils/myPageUtil";
import { Button } from "iview";
import { uploadUrl } from "@/api/uploadFile";
export default {
  name: "blogTagAdmin",
  //用于刷新页面
  inject: ["reload"],
  data() {
    return {
      searchObj: {},
      uploadPictureUrl: uploadUrl,
      tagDig: false,
      visible: false,
      showUpload: true,
      tagObj: {},
      pageData: {
        total: 0,
        current: 1,
        size: 10,
        data: []
      },
      columns1: [
        {
          title: "缩略图",
          key: "avatar",
          render: (h, params) => {
            return h("div", [
              h("img", {
                attrs: {
                  src: params.row.avatar
                },
                style: {
                  width: "80px",
                  height: "60px"
                }
              })
            ]);
          }
        },
        {
          title: "标签名称",
          key: "content"
        },
        {
          title: "状态",
          key: "status",
          render: (h, params) => {
            if (params.row.status == 1) {
              return h("span", "正常");
            } else {
              return h("span", "禁用");
            }
          }
        },
        {
          title: "点击数量",
          key: "clickCount"
        },
        {
          title: "排序",
          key: "sort"
        },
        {
          title: "创建时间",
          key: "createTime"
        },
        {
          title: "修改时间",
          key: "updateTime"
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          fixed: "right",
          align: "center",
          render: (h, params) => {
            return h("div", [
              //渲染一个div标签
              h(
                Button,
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.edit(params.row.id);
                    }
                  }
                },
                "编辑"
              ),
              h(
                Button,
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.row.id);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data1: []
    };
  },
  methods: {
    changePage(index) {
      //加载分页数据
      this.searchObj.current = index;
      this.searchObj.size = this.pageData.size;
      this.page(this.searchObj);
    },
    page(obj) {
      tagPage(obj).then(res => {
        if (res.data.code == 200) {
          //处理分页
          this.pageData = dealPageData(res.data);
          this.data1 = this.pageData.data;
        }
      });
    },
    serach() {
      this.searchObj.current = 1;
      this.searchObj.size = this.pageData.size;
      this.page(this.searchObj);
    },
    resetSearch() {
      this.searchObj = {};
    },
    exportTag() {
      exportExcel(this.searchObj);
    },
    edit(id) {
      getDetail(id).then(res => {
        if(res.data.code == 200){
          this.tagObj = res.data.data;
        }
      });
      this.tagDig = true;
    },
    remove(id) {
      this.$Message.info("删除");
    },
    submitForm() {
      this.$Message.info("提交");
    },
    ok() {
      //刷新当前页面,保证数据表单数据清空
      this.reload();
    },
    cancel() {
      //刷新当前页面,保证数据表单数据清空
      this.reload();
    },
    handleView() {
      this.visible = true;
    },
    handleRemove() {
      //删除src的属性
      this.showUpload = false;
    },
    handleSuccess(res, file) {
      /* file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
        file.name = '7eb99afb9d5f317c912f08b5212fd69a';*/
      //獲取後臺返回的文件id todo
      if (res.data.code == 200) {
        console.log("fileId", res.data.data);
      }
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "The file format is incorrect",
        desc:
          "File format of " +
          file.name +
          " is incorrect, please select jpg or png."
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: "Exceeding file size limit",
        desc: "File  " + file.name + " is too large, no more than 2M."
      });
    },
    handleBeforeUpload() {
      const check = this.uploadList.length < 5;
      if (!check) {
        this.$Notice.warning({
          title: "Up to five pictures can be uploaded."
        });
      }
      return check;
    }
  },
  created() {
    //加载分页数据
    this.page({ current: 1, size: this.pageData.size });
  }
};
</script>

<style scoped>
</style>
